{% extends "personal_center/base.html" %}
{% load state_display %}
{% block page_link %}
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/common.css">
    <script type="text/javascript" src="../../static/personal_center/js/index.js"></script>
{#    <link type="text/css" rel="stylesheet" href="../../static/personnel/TimeSelector/skin/jedate.css">#}
{#    <script type="text/javascript" src="../../static/personnel/TimeSelector/src/jedate.js"></script>#}
    <link href="../../static/personnel/css/jquery.searchableSelect.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="../../static/forum/jqueryDatePicker/font_file.css">
    <link rel="stylesheet" href="../../static/forum/jqueryDatePicker/index.css">
{% endblock %}


{% block style %}
    <style>
        .add_class {background: #1E90FF;}
        .wrap{line-height: 40px;height: 35px;border: 1px solid #0d8ddb;width: 300px;margin-top: 2.5px;display: flex;transition: border-color .2s;border-radius: 4px;margin-right: 10px;}
        .wrap:hover{border-color: #c0c4cc;}
        .wrap:active{border-color: #66b1ff;}
        .wrap.active{border-color: #66b1ff;}
        .wrap > div{flex: 1;padding: 0 10px;display: flex;cursor: pointer;}
        .wrap .ali-iconfont{display: inline-block;width: 20px;text-align: center;margin-right: 5px;}
        .wrap-l-starTime, .wrap-l-endTime{display: flex;justify-content: center;align-items: center;}
        .wrap [name="startTime"], .wrap [name="endTime"]{flex: 1;width: 100%;height: 95%;}
        .wrap [name="startTime"], .wrap [name="endTime"], .wrap [name="startTime"]:focus, .wrap [name="endTime"]:focus{border: none;outline: none;cursor: pointer;}
        .shade {position: fixed;top: 0;left: 0;right: 0;bottom: 0;background-color: rgba(36, 36, 36, 0.5);display: none;z-index: 10000;}
        .cancellation {width: 100px;border: #cfcfcf solid 1px;background: #cfcfcf;color: white;height: 33px;border-radius: 3px;margin-top: 10px;}
        .cancellation:hover {background: #999999;}
        .confirm {width: 100px;border: #00a0e9 solid 1px;background: #00a0e9;color: white;height: 33px;border-radius: 3px;margin-top: 10px;}
        .confirm:hover {background: #0c6fd9;}
    </style>
{% endblock %}


{% block right_content %}
    <div id="new_issues" style="width: 100%;height: 100%;overflow: auto;background-color: white;">
        <div style="width: 100%;height: 40px;font-size: 0;padding-right: 15px;">
            <div style="float: right;display: inline-block;vertical-align: top;width: 200px;margin-left: 20px;margin-top: 2.5px;">
                <select name="affix" style="width: 250%;margin-top: 5px;height:30px;z-index: 100;" id="affix" class="affix_seal_select">
                    <option value="0">请选择用印类别</option>
                    <option value="1">快捷用印</option>
                    <option value="2">非快捷用印</option>
                </select>
            </div>

            <div style="float: right;display: inline-block;vertical-align: top;width: 200px;margin-left: 20px;margin-top: 2.5px;">
                <select name="category" style="width: 250%;margin-top: 5px;height:30px;z-index: 100;" id="category" class="category_select">
                    <option value="0">请选择文件类别</option>
                    <option value="1">协议类</option>
                    <option value="2">非协议类</option>
                </select>
            </div>

            <div style="float: right;display: inline-block;vertical-align: top;width: 380px;margin-left: 20px;margin-top: 2.5px;">
                <select name="seal_type" style="max-width: 100%;margin-top: 5px;height:30px;z-index: 100;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: inline-block;" id="seal_type" class="seal_select">
                    <option value="">请选择印章</option>
                    <option value="京山市人民医院公章">京山市人民医院公章</option>
                    <option value="华中科技大学协和京山医院公章">华中科技大学协和京山医院公章</option>
                    <option value="法人章">法人章</option>
                    <option value="医疗机构执业许可证">医疗机构执业许可证(正本)</option>
                    <option value="事业单位法人证书">事业单位法人证书(正本)</option>
                    <option value="法人身份证复印件">法人身份证复印件</option>
                    <option value="中共京山市人民医院委员会">中共京山市人民医院委员会</option>
                    <option value="党委书记私章">党委书记私章</option>
                    <option value="中国共产主义青年团京山市人民医院总支委员会印章">中国共产主义青年团京山市人民医院总支委员会印章</option>
                    <option value="其他证书">其他证书</option>
                </select>
            </div>

            <div style="float: right;display: inline-block;vertical-align: top;width: 280px;margin-left: 20px;margin-top: 2.5px;">
                <select name="dept" style="width: 250%;margin-top: 5px;height:30px;z-index: 100;" id="dept" class="dept_select">
                    <option value="{{ dept_id }}">{{ dept }}</option>
                    {% for dep_dict in dep_dict_list %}
                        {% if dept_id|add_quotes != dep_dict.value|add_quotes %}
                            <option value="{{ dep_dict.value }}">{{ dep_dict.name }}</option>
                        {% endif %}
                    {% endfor %}

                </select>
            </div>

            <div style="float: right;height: 30px;margin-left: 20px;line-height: 30px;font-size: 14px;">
                <div class="wrap" style="height: 30px;">
                    <div class="wrap-l">
                        <i class="ali-iconfont ali-iconshizhong" style="margin-top: -7px;"></i>
                        <div class="wrap-l-starTime">
                            <input name="startTime" id="startTime" type="text" placeholder="开始日期" autocomplete="off">
                        </div>

                    </div>
                    <div class="wrap-r">
                        <i class="ali-iconfont ali-iconshizhong" style="margin-top: -7px;"></i>
                        <div class="wrap-l-endTime">
                            <input name="endTime" id="endTime" type="text" placeholder="结束日期" autocomplete="off">
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div style="width: 100%;">
            <div style="float: right;margin-top: 5px;font-size: 0;margin-bottom: 5px;width: 420px;">
                <input type="text" id="search_value" name="search_val" style="width: 300px;display: inline-block;border-bottom-left-radius: 3px;border-top-left-radius: 3px;border: #0d8ddb solid 1px;vertical-align: top;font-size: 14px;padding-left: 2px;height: 30px;outline: none;" placeholder="请输入搜索关键词">
                <button class="search-action" style="width: 100px;border-bottom-right-radius: 3px;border-top-right-radius: 3px;display: inline-block;font-size: 14px;border: #0d8ddb solid 1px;border-left: none;background: #0d8ddb;color: white;height: 30px;margin-right: 15px;outline: none;cursor: pointer;margin-left: -1px;">搜索</button>
            </div>

            <div style="width: 200px;text-align: center;float: right;vertical-align: top;margin-right: 15px;margin-top: 5px;">
                <select name="offline_printing" style="width: 200px;height:30px;" id="offline_printing">
                    <option value="0">线上用印</option>
                    <option value="1">线下用印</option>
                </select>
            </div>

            <div style="width: 100px;text-align: center;float: right;vertical-align: top;">
                <button onclick="BatchLine()" style="width: 80px;height: 30px;border: #2db7f5 solid 1px;background: #2db7f5;color: white;margin-top: 5px;border-radius: 3px;">批量汇总</button>
            </div>
        </div>

        <div id="BatchSummary" class="shade">
            <div id="BatchFirst" style="width: 100%;height: 100%;position: absolute;">
                <div style="width: 500px;height: 200px;background: #F5F5F5;z-index: 10000;position: absolute;top: 50%;left: 50%;transform:translate(-50%,-50%);border-radius: 3px;border: #dfdfdf solid 1px;">
                    <div id="BatchTitle" style="width: 100%;height: 40px;background: #f4f7fa;cursor: move;border-top-left-radius: 3px;border-top-right-radius: 3px;line-height: 40px;border-bottom: #dfdfdf solid 1px;">
                        <div style="width: 20%;margin-left: 1%;display: inline-block;line-height: 0px;font-size: 14px;">
                            批量汇总
                        </div>
                        <span onclick="BatchClose()" style="float: right;padding-right: 2%;cursor: pointer;">
                            <i class="iconfont icon-quchu"></i>
                        </span>
                    </div>
                    <div style="width: 100%;height: 100px;">
                        <div style="width: 100%;height: 50px;line-height: 50px;padding-left: 5%;">
                            <label for="">开始时间：</label>
                            <input type="text" id="start_time" style="width: 60%;height: 30px;border: #cfcfcf solid 1px;border-radius: 3px;outline: none;padding-left: 5px;" autocomplete="off">
                        </div>
                        <div style="width: 100%;height: 50px;line-height: 50px;padding-left: 5%;">
                            <label for="">结束时间：</label>
                            <input type="text" id="end_time" style="width: 60%;height: 30px;border: #cfcfcf solid 1px;border-radius: 3px;outline: none;padding-left: 5px;" autocomplete="off">
                        </div>
                    </div>
                    <div style="width: 100%;height: 50px;text-align: center;">
                        <button class="cancellation" onclick="BatchClose()">取&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;消</button>
                        <button class="confirm" onclick="ConfirmSummit()">确&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;认</button>
                    </div>
                </div>
            </div>
        </div>

        <div id="my_application" style="width: 100%;height: 90.5%;overflow: auto;background-color: white;">
            <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;">
                <div style="height: 100%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                    <section class="grid-main" style="height: 100%;">
                        <table id="main_table"></table>
                    </section>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script src="../../static/personnel/js/jquery-1.11.1.min.js"></script>
    <script src="../../static/personnel/js/jquery.searchableSelect.js"></script>
    <script src="../../static/forum/jqueryDatePicker/moment.js"></script>
    <script src="../../static/forum/jqueryDatePicker/datePicker.min.js"></script>
    <script src="../../static/administrative/layDate-v5.0.9/laydate/laydate.js"></script> <!-- 改成你的路径 -->
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("print_report").className = "add-nav-active";
            document.getElementById("SystemReport").style.display='block';
            document.getElementById("ReportIco").className = "iconfont icon-jiantou-xia";
        };

        lay('#version').html('-v' + laydate.v);
        //执行一个laydate实例
        laydate.render({
            elem: '#start_time', //指定元素
            type: 'date',
            format: 'yyyy-MM-dd'
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#end_time', //指定元素
            type: 'date',
            format: 'yyyy-MM-dd'
        });

        const gridManagerName = "test",
        TYPE_MAP = {1: "HTML/CSS", 2: "nodeJS", 3: "javaScript", 4: "前端鸡汤", 5: "PM Coffee", 6: "前端框架", 7: "前端相关"},
        arg = {
            gridManagerName: "test",
            width: "100%",
            height: "100%",
            autoOrderConfig: {fixed: "left"},
            checkboxConfig: {key: "id", fixed: "left"},
            supportAjaxPage: !0,
            sortMode: "single",
            supportMenu: !0,
            menuHandler: e => (e.unshift({
                content: "自定义菜单", line: !0, onClick: e => {
                    alert(e)
                }
            }), e),
            useCellFocus: !0,
            useHideRow: !0,
            supportMoveRow: !0,
            moveRowConfig: {
                key: "priority", useSingleMode: !0, fixed: "left", handler: (e, t) => {
                    console.log(e, t)
                }
            },
            disableCache: !1,
            ajaxData: function (e, t) {
                var local_host = window.location.host;          // 获取当前IP
                return "/forum/print_report.html"
            },
            exportConfig: {
                fileName: e => {
                    const t = new Date;
                    let a = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`;
                    for (let t in e) a = `${a}-${t}=${e[t]}`;
                    return a
                }, suffix: "xls"
            },
            ajaxType: "POST",
            checkedBefore: function (e, t, a) {
                return console.log("checkedBefore==", e, t, a), a && 90 === a.id && alert("该节点在checkedBefore中配置为不可选"), a && 90 !== a.id
            },
            responseHandler: e => (e.data.forEach((e => {
                e.priority = e.id
            })), e),
            rowRenderHandler: (e, t) => e,
            emptyTemplate: e => `<div style="text-align: center;">${e.query.title ? "搜索为空" : "暂无数据"}</div>`,
            columnData: [
                {
                    key: "number",
                    text: "印章审批表编号",
                    align: "center",
                }, {
                    key: "date",
                    text: "日期",
                    align: "center",
                }, {
                    key: "matter_type_text",
                    text: "用章事由",
                    align: "left",
                }, {
                    key: "company",
                    text: "用章科室",
                    align: "center",
                }, {
                    key: "apply_user",
                    text: "用章人",
                    align: "center",
                }, {
                    key: "servings",
                    text: "用印次数",
                    align: "center",
                }, {
                    key: "director",
                    text: "科室负责人",
                    align: "center",
                }, {
                    key: "leader",
                    text: "分管领导",
                    align: "center",
                }, {
                    key: "agreement",
                    text: "协议类",
                    align: "center",
                }, {
                    key: "note",
                    text: "备注",
                    align: "center",
                }]
        }, demo1 = {
            initSearch: function () {
            }, initFN: () => {
                document.querySelector(".search-action").addEventListener("click", (function () {
                    var data_value = document.getElementById("search_value").value;
                    var startTime = document.getElementById("startTime").value.split(" ")[0];
                    var endTime = document.getElementById("endTime").value.split(" ")[0];
                    var category = document.getElementById("category").value;
                    var affix = document.getElementById("affix").value;
                    var seal_type = document.getElementById("seal_type").value;
                    var offline_printing = document.getElementById("offline_printing").value;
                    var dept = $("#dept").val();
                    var e = {
                        search_data: data_value,
                        startTime: startTime,
                        endTime: endTime,
                        search_dept: dept,
                        category: category,
                        seal_type: seal_type,
                        affix: affix,
                        offline_printing: offline_printing
                    };
                    table.GM("setQuery", e, (function () {
                        console.log("setQuery执行成功")
                    }))
                 }))
            }, initGM: function () {
                new window.GridManager(table, arg, (e => {
                    console.log("渲染完成后的回调函数:", e), console.log(arg.columnData)
                }))
            }, editRowData: function (e) {
                window.GridManager.updateRowData("test", "id", {
                    id: window.parseInt(e.getAttribute("data-id")),
                    lastDate: (new Date).getTime()
                })
            }
        }, table = document.querySelector("#main_table");
        demo1.initSearch(table), demo1.initGM(table), demo1.initFN();

        function select_and_search() {
            xmSelect.render({
                el: '#selectDemo',
                checkbox: true,
                repeat: false,
                autoRow: true,
                filterable: true,
                prop: {name: 'name', value: 'value',},
                height: '200px',
                tips: '请选择',
                tree: {
                    show: true,
                    showFolderIcon: true,
                    showLine: true,
                    indent: 20,
                    expandedKeys: [-3],
                    strict: false,
                },
                data: function () {
                    return {{ dep_dict_list | safe }};

                },
                on: function (data) {
                    var arr = data.arr;                     //arr:  当前多选已选中的数据
                    console.log("data: ", arr)
                    var li_list = document.getElementsByClassName("xm-icon-duox")
                    for (var i=0; i<li_list.length; i++) {
                        console.log(li_list[i].selected)
                    }
                },
            });
        }

        $(function(){
            $('select').searchableSelect();
        });


        var fastTime = {
            true: {
                4: { // 双日历天、小时的快速选择格式
                    '最近1天': { startTime: moment().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'), endTime: moment().format('YYYY-MM-DD 00:00:00') },
                    '最近7天': { startTime: moment().subtract(7, 'day').format('YYYY-MM-DD 00:00:00'), endTime: moment().format('YYYY-MM-DD 00:00:00') },
                    '最近一个月': { startTime: moment().subtract(1, 'month').format('YYYY-MM-DD 00:00:00'), endTime: moment().format('YYYY-MM-DD 00:00:00') },
                    '最近三个月': { startTime: moment().subtract(3, 'month').format('YYYY-MM-DD 00:00:00'), endTime: moment().format('YYYY-MM-DD 00:00:00') }
                },
                5: { // 双日历天、小时的快速选择格式
                    '最近1天': { startTime: moment().subtract(1, 'day').format('YYYY-MM-DD 00:00:00'), endTime: moment().format('YYYY-MM-DD 00:00:00') },
                    '最近7天': { startTime: moment().subtract(7, 'day').format('YYYY-MM-DD 00:00:00'), endTime: moment().format('YYYY-MM-DD 00:00:00') },
                    '最近一个月': { startTime: moment().subtract(1, 'month').format('YYYY-MM-DD 00:00:00'), endTime: moment().format('YYYY-MM-DD 00:00:00') },
                    '最近三个月': { startTime: moment().subtract(3, 'month').format('YYYY-MM-DD 00:00:00'), endTime: moment().format('YYYY-MM-DD 00:00:00') }
                },
                6: { // 双日历周的快速选择格式
                    '本周': { startTime: moment().startOf('week').subtract(0, 'week').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('week').format('YYYY-MM-DD HH:mm:ss') },
                    '最近2周': { startTime: moment().startOf('week').subtract(2, 'week').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('week').format('YYYY-MM-DD HH:mm:ss') },
                    '最近4周': { startTime: moment().startOf('week').subtract(4, 'week').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('week').format('YYYY-MM-DD HH:mm:ss') },
                    '最近8周': { startTime: moment().startOf('week').subtract(8, 'week').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('week').format('YYYY-MM-DD HH:mm:ss') },
                },
                7: { // 双日历月的快速选择格式
                    "本月": { startTime: moment().startOf('month').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')},
                    "本年": { startTime: moment().startOf('year').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')},
                    "最近六个月": { startTime: moment().startOf('month').subtract(6, 'month').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('month').format('YYYY-MM-DD HH:mm:ss')}
                },
                8:{ // 双日历季的快速选择格式
                    "本季度": { startTime: moment().startOf('quarter').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('quarter').format('YYYY-MM-DD HH:mm:ss')},
                    "今年至今": { startTime: moment().startOf('year').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('quarter').format('YYYY-MM-DD HH:mm:ss')},
                    "上一季度": { startTime: moment().subtract(1, 'quarter').startOf('quarter').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().subtract(1, 'quarter').endOf('quarter').format('YYYY-MM-DD HH:mm:ss')}
                },
                9: { // 双日历年的快速选择格式
                    "今年": { startTime: moment().startOf('year').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('year').format('YYYY-MM-DD HH:mm:ss')},
                    "近一年": { startTime: moment().subtract(1, 'year').startOf('year').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('year').format('YYYY-MM-DD HH:mm:ss')},
                    "近二年": { startTime: moment().subtract(2, 'year').startOf('year').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('year').format('YYYY-MM-DD HH:mm:ss')},
                    "近十一年": { startTime: moment().subtract(11, 'year').startOf('year').format('YYYY-MM-DD HH:mm:ss'), endTime: moment().endOf('year').format('YYYY-MM-DD HH:mm:ss')}
                }
            },
            false: {
                    4: {  // 单日历天和小时的快速时间选择格式
                        '今天': { startTime: moment().format('YYYY-MM-DD HH:mm:ss') },
                        '昨天': { startTime: moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss') },
                        '一周前': { startTime: moment().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss') },
                    },
                    5: {  // 单日历天和小时的快速时间选择格式
                        '今天': { startTime: moment().format('YYYY-MM-DD HH:mm:ss') },
                        '昨天': { startTime: moment().subtract(1, 'day').format('YYYY-MM-DD HH:mm:ss') },
                        '一周前': { startTime: moment().subtract(7, 'day').format('YYYY-MM-DD HH:mm:ss') },
                    },
                    6: { // 单日历周的快速选择格式
                        '本周': { startTime: moment().startOf('week').subtract(0, 'week').format('YYYY-MM-DD HH:mm:ss')},
                        '上一周': { startTime: moment().startOf('week').subtract(1, 'week').format('YYYY-MM-DD HH:mm:ss')},
                        '上二周': { startTime: moment().startOf('week').subtract(2, 'week').format('YYYY-MM-DD HH:mm:ss')},
                    },
                    7: {  // 单选日历月的快速时间选择格式
                        '当前月': { startTime: moment().startOf('month').format('YYYY-MM-DD HH:mm:ss') },
                        '一个月前': { startTime: moment().startOf('month').subtract(1, 'month').format('YYYY-MM-DD HH:mm:ss') },
                        '半年前': { startTime: moment().startOf('month').subtract(6, 'month').format('YYYY-MM-DD HH:mm:ss') },
                        '一年前': { startTime: moment().startOf('month').subtract(12, 'month').format('YYYY-MM-DD HH:mm:ss') },
                    },
                    8: {  // 单选日历季的快速时间选择格式
                        '本季度': { startTime: moment().startOf('quarter').format('YYYY-MM-DD HH:mm:ss') },
                        '上一季度': { startTime: moment().startOf('quarter').subtract(1, 'quarter').format('YYYY-MM-DD HH:mm:ss') },
                        '上二季度': { startTime: moment().startOf('quarter').subtract(2, 'quarter').format('YYYY-MM-DD HH:mm:ss') },
                    },
                    9: {  // 单选日历年的快速时间选择格式
                        '今年': { startTime: moment().startOf('year').format('YYYY-MM-DD HH:mm:ss') },
                        '去年': { startTime: moment().startOf('year').subtract(1, 'year').format('YYYY-MM-DD HH:mm:ss') },
                        '前年': { startTime: moment().startOf('year').subtract(2, 'year').format('YYYY-MM-DD HH:mm:ss') },
                    },
            }

        }

        $('.wrap').on('click', function () {
            var _this = this;
            var reportTimeType = 4;
            var double = true;
            if(!$(this).next('[name="datePicker"]').length) {
                $(this).after("<div class='datePicker-x' name='datePicker' style='position: fixed;z-index: 1000;background: white;'></div>");
                    datePicker = $('.datePicker-x').datePicker({
                        reportTimeType: reportTimeType, // 4代表小时、5代表天、6代表周、7代表月、8代表季、9代表年
                        startDom: $(_this).find('input[name="startTime"]'),  // 开始时间要赋值的DOM元素
                        endDom: $(_this).find('input[name="endTime"]'),  // 结束时间要赋值的DOM元素
                        format: 'YYYY-MM-DD',
                        fastTime: fastTime[double][reportTimeType], // 快速选择的时间
                        isFast: true,   // 是否显示快速选择的选项
                        isDouble: double,   // 是否双选择的日历
                        disabledDate: false,    // 是否禁用以后的时间
                        yes: function (startTime, endTime) {    // 成功赋值前的回调可改变赋值的时间格式
                        },
                    });
            }else {
                if($(this).next('[name="datePicker"]').hasClass('hide')) {
                    $(this).next('[name="datePicker"]').removeClass('hide');
                    datePicker.render();
                }else {
                    $(this).next('[name="datePicker"]').addClass('hide');

                }
            }
        });

        let BatchTitle = document.querySelector("#BatchTitle");
        let BatchFirst = document.querySelector("#BatchFirst");
        BatchTitle.addEventListener("mousedown", function (e) {
            let x = e.pageX - BatchFirst.offsetLeft;
            let y = e.pageY - BatchFirst.offsetTop;

            document.addEventListener("mousemove", move);
            function move(e) {
                BatchFirst.style.left = e.pageX - x + 'px';
                BatchFirst.style.top = e.pageY - y + 'px';
            }

            document.addEventListener("mouseup", function (e) {
                document.removeEventListener("mousemove", move);
            })
        });

        function BatchLine() {
            document.getElementById("BatchSummary").style.display = "table-row";
        }

        function BatchClose() {
            document.getElementById("BatchSummary").style.display = "none";
        }

        function ConfirmSummit() {
            var start_time = document.getElementById("start_time").value;
            var end_time = document.getElementById("end_time").value;
            if (!start_time) {
                alert("请选择开始时间！")
                return false
            }
            if (!end_time) {
                alert("请选择结束时间！")
                return false
            }
            var form = new FormData();
            form.append('start_time', start_time);
            form.append('end_time', end_time);
            document.getElementById("loading").style.display = "inline-block";
            var xhr = new XMLHttpRequest();
            xhr.open('post', "/forum/confirm_summit", true);
            xhr.send(form);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        document.getElementById("loading").style.display = "none";
                        var JsonDate = JSON.parse(xhr.responseText);
                        console.log(JsonDate)
                        if (JsonDate["code"] === 200) {
                            console.log("开始下载！")
                            window.location.href = JsonDate["output_filename"];
                            BatchClose();
                        } else {
                            alert(JsonDate['message']);
                        }
                    }
                }
            };
        }
    </script>
{% endblock %}
